<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/comm.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
		<script type="text/javascript" src="js/comm.js"></script>
		<script src="js/lan.js"></script>
	</head>

	<body>
		<div class="box" id="box">

			<div class="main" id="main">
				<div class="main_left">
					<a href="#" class="pub_img_box" id="pub_img_box">
						<img src="img/publicity1.png" id="pub_img1" class="pub_img" />
						<img src="img/publicity2.jpg" id="pub_img2" class="pub_img" />
						<div class="jiantou_left" id="jiantou_left"></div>
						<div class="jiantou_right" id="jiantou_right"></div>
					</a>
				</div>
				<div class="main_right">
					<div class="main_right_box">
						<div id="main_right_box1">
							<img src="img/pic1.jpg" class="img_bg">
							<img src="img/tbg1.png" class="img_wbg" id="wbg" />
							<img src="img/t1.png" class="img_t1" />
							<img src="img/w1.png" class="img_w1" />
						</div>
						<div id="main_right_box2" class="display_none">
							<img src="img/pic2.jpg" class="img_bg">
							<img src="img/tbg2.png" class="img_wbg" />
							<img src="img/t2.png" class="img_t1" />
							<img src="img/w2.png" class="img_w1" />
						</div>
						<div id="main_right_box3" class="display_none">
							<img src="img/pic3.jpg" class="img_bg">
							<img src="img/tbg3.png" class="img_wbg" />
							<img src="img/t3.png" class="img_t1" />
							<img src="img/w3.png" class="img_w1" />
						</div>

					</div>
				</div>
			</div>

		</div>

		<script type="text/javascript">
		
		document.execCommand("BackgroundImageCache", false, true);
			$("#main").before(header);
			$("#main").after(footer);

			//左图动画效果
			var timer = setInterval(function() {
					$("#pub_img2").fadeToggle(700);
				}, 1500)
				//鼠标移入停止计时器
			$("#pub_img_box").mouseover(function() {
				clearInterval(timer);
			});
			//鼠标移出开始计时器
			$("#pub_img_box").mouseleave(function() {
				clearInterval(timer);
				timer = setInterval(function() {
					$("#pub_img2").fadeToggle(700);
				}, 1500)
			});
			$("#jiantou_left, #jiantou_right").click(function() {
				$("#pub_img2").fadeToggle(700);
			});

			//右图动画效果		
			var i = 1;
			var j = i + 1;
			setInterval(function() {

				$("#main_right_box" + i).css("display", "none");
				$("#main_right_box" + j).css("display", "block");

				i == 3 ? i = 1 : i++;
				j == 3 ? j = 1 : j++;

			}, 10000);
			
			// 国际化制作
			function setLanguage(){
				var nowLObj = getNowLanguage();
				document.getElementById("lanMark").innerHTML = nowLObj.smallL;
				var lanOpArr = document.getElementsByClassName("lanOp");
				
				setArrObj(lanOpArr, "innerHTML", nowLObj.sel);
				setArrObj(lanOpArr, "value", nowLObj.sel);
				document.getElementById("enterInfo").innerHTML = nowLObj.enterL;
				var navArr = document.querySelectorAll(".header_bottom a");
				setArrObj(navArr, "innerHTML", nowLObj.nav);
				var menuArr = document.querySelectorAll("#drop_menu a");
				setArrObj(menuArr, "innerHTML", nowLObj.navDown);
				var mainRArr = document.querySelectorAll(".main_right_box>div");
				for (var i = 0; i < mainRArr.length; i++){
					setArrObj(mainRArr[i].children, "src", nowLObj.rightFontImg[i]);
				}
				var footerImgArr = document.querySelectorAll(".footer_top>a");
				console.log(nowLObj.footerImgArr);
				for (var i = 0; i < footerImgArr.length; i++){
					(function(ind){
						footerImgArr[ind].onmouseenter = function(){
							footerImgArr[ind].style.backgroundImage = nowLObj.footerImgArr.hover[ind];
						}
						footerImgArr[ind].onmouseleave = function(){
							footerImgArr[ind].style.backgroundImage = nowLObj.footerImgArr.normal[ind];
						}
						
					})(i)
				}
				// 默认设置一波底部五个图片
				setArrObj(footerImgArr, "backgroundImage", nowLObj.footerImgArr.normal);

				// 设置底部说明文字
				var liAOneArr = document.querySelectorAll(".footer_bottom_ulOne a");
				var liATwoArr = document.querySelectorAll(".footer_bottom_ulTwo a")
				setArrObj(liAOneArr, "innerHTML", nowLObj.contact[0]);
				setArrObj(liATwoArr, "innerHTML", nowLObj.contact[1]);
			}
			
			// for 循环赋值封装方法
			// 参数1: 标签数组
			// 参数2: 要给标签哪个属性赋值
			// 参数3: 文字数组
			function setArrObj(mArr, attr, lanArr){
				for (var i = 0; i < mArr.length; i++){
					if (mArr[i][attr] == undefined){ // 有一些attr属性是在style里的
						mArr[i].style[attr] = lanArr[i];
					} else {
						mArr[i][attr] = lanArr[i];
					}
					
				}
			}
			
			// 如果上来默认没选择语言, 默认中文
			console.log(localStorage.lan);
			if (localStorage.lan == null){
				localStorage.lan = "中文";
			}
			setLanguage();
		</script>
	</body>

</html>